<template>
    <el-container class='tabs_page_container'>
        <el-main>
            <el-tabs class='common_tabs' v-model='active' type='border-card' v-if="tabsList.length > 0"
                     @tab-click="handleTabClick">
                <template v-for="(item, index) in tabsList">
                    <el-tab-pane :label='item.title' :name='item.value' :key="index">
                        <component :key="item.value" :is="item.component" v-bind="item.props"
                                   v-if="active===item.value"/>
                    </el-tab-pane>
                </template>
            </el-tabs>
        </el-main>
    </el-container>
</template>

<script>
import {checkPermission} from "@common/utils/permission";

export default {
    name: 'TabsPage',
    props: {
        list: {
            type: Array,
            default: null,
        },
    },
    data() {
        return {
            active: '',
        };
    },
    computed: {
        tabsList() {
            let list = this.list || [];
            if (this.$utils.isNotEmptyList(list)) {
                list = list.filter(item => {
                    if (this.$utils.isNotEmpty(item.permission)) {
                        return checkPermission(item.permission, this.$route.path)
                    }
                    return true;
                });
            }
            return list;
        },
    },
    watch: {
        tabsList: {
            handler() {
                this.init();
            },
            deep: true,
            immediate: true,
        },
    },
    methods: {
        init() {
            if (this.$utils.isEmpty(this.active) && this.$utils.isNotEmptyList(this.tabsList)) {
                this.active = this.tabsList[0].value;
            }
        },
        setActive(val) {
            this.active = val;
        },
        handleTabClick(tab) {
            this.active = tab.name;
        },
    },
}
</script>

<style lang="less" rel="stylesheet/less" scoped>
.tabs_page_container {
    width: 100%;
    height: 100%;
    overflow: hidden;

    /deep/ .common_tabs {
        width: 100%;
        height: 100%;
        overflow: hidden;

        .el-tabs__content {
            padding: 0;
            width: 100%;
            height: calc(100% - 40px);
            overflow: hidden;

            .el-tab-pane {
                width: 100%;
                height: 100%;
                overflow: hidden;
            }
        }
    }
}
</style>
